<template>
  <div class="app-container">
    <!--通过表单配置方式渲染-->
    <el-form
      v-if="formBuildConfig.length>0"
      ref="form"
      :size="formConf.size"
      :label-position="formConf.labelPosition"
      :label-width="formConf.labelWidth + 'px'"
      class="content-form"
    >
      <DraggableItem
        v-for="(element, index) in formBuildConfig"
        :key="element.buildKey+index"
        :name="'my-component-' + element.formId"
        :drawing-list="formBuildConfig"
        :element="element"
        :index="index"
        :formData="{}"
        :formDataOptions="{}"
        :form-conf="formConf"
      />
    </el-form>
    <!--对话框下方操作按钮-->
    <div class="dialog-footer">
      <el-button type="primary" @click="submitSet" v-loading.fullscreen.lock="isSubmitForm" :disabled="isSubmitForm">
        确 定
      </el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
//表单配置
import {
  formConf
} from '@/views/youshuda/components/FormBuild/generator/config'
import {getFormBuildConfig} from '@/views/youshuda/api/BaseApi'

export default {
  name: 'FormEdit',
  props: {
    //表单设计Key
    formBuildKey: {
      default: ''
    },
  },
  components:{
    //表单配置展示组件
    DraggableItem: () => import('@/views/youshuda/components/FormBuild/generator/DraggableItem'),
  },
  data(){
    return {
      formConf,
      // 标识提交按钮是否可用
      isSubmitForm: false,
      // 加载图片
      loading: require('@/assets/images/loading.gif'),
      //表单设计字段配置信息
      formBuildConfig: [],
    }
  },
  created() {
    this.init();
  },
  methods: {
    /** 初始化 **/
    init(){
      if(!this.strIsNotEmpty(this.formBuildKey)){
        console.log("未获取到表单配置KEY，中止请求");
        return;
      }
      getFormBuildConfig(this.formBuildKey).then(res => {
        if (res.code == 200) {
          //表单设计字段配置信息
          this.formBuildConfig = res.data
        } else {
          this.msgError(res.msg)
        }
      })
    },
    /** 取消按钮 */
    cancel() {
      this.$emit('cancel')
    },
    /** 提交按钮 */
    submitSet() {
      this.$emit('submitSet')
    }
  }
}
</script>

<style scoped>
  /*.app-container{*/
  /*  height: 100%;*/
  /*}*/
  .dialog-footer {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: white;
    left: 0;
    text-align: end;
    padding-right: 30px;
    z-index: 9999;
  }

  .content-form{
    margin-bottom: 30px;
  }

  textarea[readonly="readonly"],
  input[readonly="readonly"] {
    background-color: #F3F3F4 !important;
  }

  .empty-info {
    height: calc(100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 18px;
    color: #ccb1ea;
    letter-spacing: 4px;
  }

  .icon{
    position: absolute;
    bottom: 4px;
    right: 4px;
    color: black;
    transform: rotate(45deg);
  }

</style>
